<template>
  <category-nav-bar/>
  <category-left-bar :titleList="titleList" @itemTitleClick="itemTitleClick"/>
  <category-main-shop :shop-infos="shopInfos"/>

</template>

<script>
  import {getCategoryData,getSubCategoryData} from "../../network/category";

  import categoryNavBar from "./CategoryChildren/categoryNavBar";
  import categoryLeftBar from "./CategoryChildren/categoryLeftBar";
  import categoryMainShop from "./CategoryChildren/categoryMainShop";


  export default {
    name: "Category",
    data(){
      return{
        titleList:[],
        shopInfos:[],

      }
    },
    components:{
      categoryNavBar,
      categoryLeftBar,
      categoryMainShop,

    },
    created() {
      getCategoryData().then((res)=>{
        this.titleList=res.data.data.category.list;
        this.shopInfos=this.getSubCategoryData(this.titleList[0].maitKey)
      })

    },
    methods:{
      itemTitleClick(maitKey){
        this.getSubCategoryData(maitKey)
      },

      getSubCategoryData(maitKey){
        getSubCategoryData(maitKey).then(
            (res)=>{
              this.shopInfos=res.data.data.list;
              //console.log(this.shopInfos);
            }
        )
      }

    }
  }
</script>

<style scoped>

</style>